import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar, Space, Toast, Image } from 'antd-mobile'
import { FilterOutline, CloseOutline } from 'antd-mobile-icons'
import { Button, SearchBar } from 'antd-mobile'
import request from '../../api/request'
import { IndexBar, List, Card, Tag } from 'antd-mobile'
import { debounce } from 'lodash'
import useDebounce from '../../Hooks/useDebounce'
import { InfiniteScroll } from 'antd-mobile'
function Index() {

  const listed = [
    {
      avatar: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
      name: 'Koto',
    },
    {
      avatar: 'https://img2.baidu.com/it/u=8013311,3592244460&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=617',
      name: '张宇航',
    },
    {
      avatar: 'https://img0.baidu.com/it/u=600722015,3838115472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
      name: '李心怡',
    },
    {
      avatar: 'https://img2.baidu.com/it/u=363858033,1221485415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
      name: '王明阳',
    },
    {
      avatar: 'https://img0.baidu.com/it/u=3453008842,3158521755&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
      name: '赵佳琪',
    },
    {
      avatar: 'https://img2.baidu.com/it/u=3435341269,3572684113&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      name: '刘晨辰',
    },
    {
      avatar: 'https://img2.baidu.com/it/u=1236419345,131906300&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      name: '郑雅婷',
    },
    {
      avatar: 'https://img2.baidu.com/it/u=74749494,3176151930&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=739',
      name: '陈雨薇',
    },
  ]

  const navigate = useNavigate()
  const back = () => navigate('/index')

  const [hasMore, setHasMore] = useState(true)

  const [lists, setList] = useState([]);
  const Feach = async () => {
    const res = await request.get('/api/city');
    console.log(res);
    setList(res.data.city)
  }

  useEffect(() => {
    Feach()
  }, [])

  const [page,setPage] = useState(1)
  const [search, setSearch] = useState([]);
  const [hislist, setHislist] = useState(
    JSON.parse(localStorage.getItem('hislist')) || []
  )

  const handSou = debounce(async (wd) => {
    if (wd.length === 0) return Toast.show('请输入关键字')
    const res = await request.get('/api/city/search', {
      params: { wd,page }
    });
    if (res.code === 200) {
      setSearch([...lists,...res.data])
      setPage(page+1)
    }
    if(res.data.length===0){
      setHasMore(false)
    }
    setSearch([])
    const index = hislist.lastIndexOf(wd);
    if (index < -1) {
      hislist.unshift(wd)
    }
    localStorage.setItem('hislist', JSON.stringify(hislist))
    setHislist(...hislist)
    setHislist([...hislist, wd])
  }, 800)

  

  const delOut = () => {
    localStorage.setItem('hislist', JSON.stringify([]))
    setHislist([])
  }


  return (
    <div>

      <NavBar onBack={back} right={<FilterOutline fontSize={20} />}>搜索</NavBar>

      <SearchBar placeholder='这里输入关键字' onChange={(val) => handSou(val)} />
      <div>
        {search.length > 0 ? (
          <List>
            {search.map((item, index) => (
              <List.Item key={index}>
                {item}
              </List.Item>
            ))}
          </List>
        ) : ('')}

      </div>

      <Card title='搜索结果:' >

        <List>
          {hislist.map((item, index) => (
            <List.Item key={index}>
              {item}
            </List.Item>
          ))}
        </List>



      </Card>

      <Card title='历史记录:' extra={<CloseOutline onClick={() => delOut()} />}>


        {hislist.map((item, index) => (
          <Tag key={index}>
            {item}
          </Tag>
        ))}


      </Card>


      <div style={{ height: window.innerHeight }}>
        <IndexBar>
          {lists.length > 0 && lists.map((item) => {
            return (
              <IndexBar.Panel
                index={item.initial}
                title={`${item.initial}`}
                key={`${item.initial}`}
              >
                <List>
                  {item.list.map((item, index) => (
                    <List.Item description={listed.map((it, ind) => (
                      <List.Item key={ind}>
                        {it.name}
                        <Image
                          src={it.avatar}
                          style={{ borderRadius: 20 }}
                          fit='cover'
                          width={40}
                          height={40}
                        />
                      </List.Item>
                    ))} key={index}>{item.name}</List.Item>
                  ))}

                </List>
              </IndexBar.Panel>

            )
          })}
        </IndexBar>
      </div>
       <InfiniteScroll loadMore={Feach} hasMore={hasMore} />
    </div>
  )
}

export default Index
